<template>
  <div>
    <ul>
      <li v-for="(d, i) in data" :key="i">{{ d }}</li>
    </ul>

    <ul>
      <li v-for="v in dataSource" :key="v.id">{{ v }}</li>
    </ul>

    <ElTable></ElTable>
  </div>
</template>

<script setup lang="ts">
import { provide, watchEffect } from 'vue';
import { props } from './table-expand';
import { useDataSource } from '../../utils/data-source';

import { ElTable } from 'element-plus';

const dataSource = useDataSource();
const $props = defineProps(props);

watchEffect(() => {
  dataSource.value = $props.data!;
});

const tableContext = {
  dataSource,
};
provide('TbleContext', tableContext);
</script>

<style scoped></style>
